var webSocket;
new Vue({
    el: '#app',
    data() {
        return {
            form: {
                name: '',
                desc: ''
            },
            form2: {
                name: '',
                desc: ''
            },
            tableData:[],
            visible: false,
            lockType:'',
            onOffType:''

        }
    },
    methods: {
        clientOnSubmit() {
            var msg = this.form.desc;
            if (!msg) {
                this.$message({
                    type: 'warning',
                    message: '请输入消息内容!'
                });
                return;
            }
            var name = this.form.name;
            if (!name) {
                this.$confirm('确定发送群发消息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    senMsg(this, "/socket_client/send_group?message=" + msg)
                }).catch(() => {
                    return;
                });

            } else {
                senMsg(this, "/socket_client/send?message=" + msg + "&name=" + name)
            }

        },
        serviceOnSubmit() {
            var msg = this.form2.desc;
            if (!msg) {
                this.$message({
                    type: 'warning',
                    message: '请输入消息内容!'
                });
                return;
            }
            var name = this.form2.name;
            if (!name) {
                this.$confirm('确定发送群发消息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    senMsg(this, "/socket_service/send_group?message=" + msg)
                }).catch(() => {
                    return;
                });

            } else {
                senMsg(this, "/socket_service/send?message=" + msg + "&name=" + name)
            }
        },
        openWebSocketClick(){
            var _this = this;
            if (!window.WebSocket)
                this.$message({type: 'warning', message: '您的浏览器不支持webSocket!'});
            webSocket = new WebSocket("ws://192.168.1.133:9000/websocket/logPrint");
            //【用于指定连接成功后的回调函数】
            webSocket.onopen = function (evt) {
                _this.onOffType = 'success';
                var msg = '<div class="text item"><span> 通道连接成功，请等待...</span></div>';
                $("#msgInfo").append(msg);
                var div = document.getElementById("msgInfo");
                div.scrollTop =  div.scrollHeight;
            };
            //【用于指定收到服务器数据后的回调函数】
            webSocket.onmessage = function (event) {
                var data = JSON.parse(event.data);
                if(!data.socketType)
                    return;

                if(!_this.visible)
                    $('#msgTable .el-table__body-wrapper').scrollTop($(".el-table__body").height() + 550);
                _this.tableData.push(data);
            };
            //[【于指定连接关闭后的回调函数。】
            webSocket.onclose = function (evt) {
                _this.onOffType = '';
                var msg = '<div class="text item"><span> 通道关闭成功...</span></div>';
                $("#msgInfo").append(msg);
                var div = document.getElementById("msgInfo");
                div.scrollTop =  div.scrollHeight;
            }
        },
        closeWebSocketClick(){
            if(webSocket)
                webSocket.close();
        },
        clearLog(){
            var _this = this;
            this.$confirm('确定清空日志?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                $("#msgInfo").html("");
                _this.tableData = [];
            }).catch(() => {
                return;
            });

        },
        formatSocketType:function (row, column){
            return row.socketType == 1 ? "客户端" : "服务端";
        },
        formatMsgType:function (row, column){
            return row.msgType == 1 ? "接收" : (row.msgType == 2 ? "发送" : "");
        },
        formatSendType:function (row, column){
            return row.sendType == 1 ? "指定个人" : (row.sendType == 2 ? "群发" : "");
        },
        lockScreen(){
            if(this.visible){
                this.visible = false;
                this.lockType = '';
            }else{
                this.visible = true;
                this.lockType = 'success';
            }
        }


    }
})

function senMsg(_this, url) {
    //发送get请求
    $.ajax({
        url: url,
        type: "GET",
        error: () => {
            _this.$message.error("发送失败");
        },
        success: (resp) => {
            if (resp == "success") {
                _this.$message({
                    message: "发送成功",
                    type: 'success'
                });
            } else {
                _this.$message.error(resp);
            }

        }
    })

}